<template>
    <svg class="processCircle" :width="width" :height="height">
        <defs>
            <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(36,161,252);stop-opacity:1"/>
                <stop offset="100%" style="stop-color:rgb(83,186,191);stop-opacity:1"/>
            </linearGradient>
        </defs>
        <!--        底圆-->
        <!--        stroke-dasharray一开始是5 565-->
        <!--        stroke-dasharray最后是560 560-->
        <circle :cx="width/2" :cy="height/2" :r="width/2-10" fill="none" stroke="#4470a3" stroke-width="15"
        >
        </circle>
        <!--        填充圆-->
        <circle :cx="width/2" :cy="height/2" :r="width/2-10" fill="none" stroke="#00f6ff" stroke-width="15"
                :stroke-dasharray="st" stroke-linecap="round"
        >
        </circle>
        <!--        内部描边圆-->
        <circle :cx="width/2" :cy="height/2" :r="width/3-8" fill="none" stroke="url(#myGradient)" stroke-width="1">
        </circle>

    </svg>
    <div class="scoreText">{{ aiReportScore }}</div>
</template>

<script>
export default {
    name: "processFeature",
    props: {
        width: {
            type: String,
            required: true,
            default: "100"
        },
        height: {
            type: String,
            required: true,
            default: "100"
        },
        offset: {
            type: String,
            required: true,
            default: "5"
        },
        /** 进度条颜色*/
        processColor: {
            type: String,
            required: true,
            default: "black"
        },
        /** 进度条底色*/
        baseColor: {
            type: String,
            required: true,
            default: "white"
        },
        // 得分
        score: {
            type: Number,
            required: true,
            default: 0
        }
    },
    data() {
        return {
            res: [],
            show: true,
            // 半圆满进度值
            processPercent: '586px',
            value: '100%',
            st: '0 376',
            st1: 0,
            st2: 565,
            offset1: 790,
            d: 0,//圆的周长
            aiReportScore: 0,
        }
    },
    methods: {
        loadProcess() {
            let temp = this.score * this.d / 110
            let b = 5
            let count =0
            let a = setInterval(() => {
                b += temp / 100
                this.st1 = b
                this.st = b + ' ' + this.st2
                if (b > temp) {
                    clearInterval(a)
                }
            }, 20)
            let c = setInterval(() => {
                this.aiReportScore += 1
                if (this.aiReportScore >= this.score) {
                    clearInterval(c)
                }
            }, 20)
        },
        /**
         * 初始化参数
         */
        init() {
            this.d = (2 * Math.PI) * (this.width / 2 - 10)
            this.st = this.st1 + ' ' + this.d
        }
    },
    created() {
        //当stroke-dasharray的第二个参数大于圆的周长时圆环上就剩下一段圆弧了
        // 通过增加第一个参数的数值，即可实现进度条的效果
        this.init()
        this.loadProcess()
    },
}
</script>

<style scoped>
.processCircle {
    transform: rotate(90deg);
}

.scoreText {
    position: relative;
    top: -106px;
    right: -70px;
    font-size: 30px;
    color: #00f6ff;
    border-style: hidden;
}

</style>